
<template>
    <div v-loading="loadingData" class="userTable" v-if="addUserBox">
        <div class="seach-add-box">
            <el-row>
                <el-col :span="8" :offset="1">
                    <el-input v-model.trim = "searchCondition" size="medium"
                        placeholder="请输入搜索内容" auto-complete="off" clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="medium" @click="onQuery">查询</el-button>
                </el-col>
                <el-col :span="4" :offset="4">
                    <el-button class="fr" type="primary" size="medium" @click="addUserBox = false">添加用户</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" border  style="width: 100%"
            :header-cell-class-name="headerCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column label="头像"  width="150">
                <template slot-scope="scope">
                    <div class="user-img-list-box margin-auto">
                        <img :src="scope.row.headImg" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="code" label="编号"  width="200"></el-table-column>
            <el-table-column prop="nickname"  label="昵称" width="150"></el-table-column>
            <el-table-column prop="sex" label="性别"  width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex==1">
                        <img src="../../assets/img/man.png" width="30" alt="">
                    </span>
                    <span v-if="scope.row.sex==2">
                        <img src="../../assets/img/wom.png" width="30" alt="">
                    </span>
                    <span v-if="scope.row.sex==0">
                        <img src="../../assets/img/wom.png" width="30" alt="">
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"  width="150"></el-table-column>
            <el-table-column label="省份/城市" width="150">
                <template slot-scope="scope">
                    {{scope.row.province+'/'+scope.row.city}}
                </template>
            </el-table-column>
            <el-table-column label="类型" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.type==0">用户</span>
                    <span v-if="scope.row.type==1">会员</span>
                    <span v-if="scope.row.type==2">管理员</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isStatus" @change="isSwitch(scope.row.isStatus)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="create_Time" label="注册时间" width="150"></el-table-column>
            <el-table-column fixed="right"  label="操作"  width="200">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="restPwd(scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页开始-->
        <div class="block">
            <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
            <div class="pageComponentFoot">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cpage"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <!--分页结束-->
    </div>
    <div v-else>
         <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark clearfix">
                    <ul class="dataUpdateUl fl">
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                姓名
                            </label>
                            <input class="inputtext margin0" v-model="addUserArr.name" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                性别
                            </label>
                            <div class="fl">
                                <el-radio  v-model="addUserArr.radio" label="1">男</el-radio>
                                <el-radio  v-model="addUserArr.radio" label="2">女</el-radio>
                            </div>
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                昵称
                            </label>
                            <input class="inputtext margin0" v-model="addUserArr.nickname" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                签名
                            </label>
                            <input class="inputtext margin0" v-model="addUserArr.signature" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                类型
                            </label>
                            <input class="inputtext margin0" v-model="addUserArr.type" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                出生日期
                            </label>
                            <div class="shux-box fl">
                                <div class="block">
                                    <el-date-picker
                                    v-model="value1"
                                    type="date"
                                    placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                地区
                            </label>
                            <div class="shux-box fl">
                                <div id="example">
                                    <select v-model="prov">
                                        <option v-for="(item,index) in arr" :value="item.name" :key="index">
                                            {{ item.name }}
                                        </option>
                                    </select>
                                    <select v-model="city">
                                        <option v-for="(item,index) in cityArr" :value="item.name" :key="index">
                                            {{ item.name }}
                                        </option>
                                    </select>
                                    <select v-model="district" v-if="district">
                                        <option v-for="(item,index) in districtArr" :value="item.name" :key="index">
                                            {{ item.name }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="service-box fl">
                        <div class="clearfix" style="margin-bottom:10px;">
                            <span class="service-logo fl labelWidth text-align-r">上传头像</span>
                            <el-upload
                                class="avatar-uploader fl"
                                action="http://132.232.13.213:8081/file/upload"
                                :data="uploadData"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="addUserArr.imageUrl" :src="addUserArr.imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <span class="service-beizhu fl">注：建议使用750*360px，文件大小不超过3M，文件格式jpg,jpeg,png,gif</span>
                        </div>
                        <ul class="hot-box">
                            <li class="clearfix">
                                <label class="fl labelWidth text-align-r">
                                    爱好
                                </label>
                                <input class="inputtext margin0" v-model="addUserArr.hobby" style="width:350px;" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl labelWidth text-align-r">
                                    电子邮箱
                                </label>
                                <input class="inputtext margin0" style="width:350px;" v-model="addUserArr.email" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl labelWidth text-align-r">
                                    星座
                                </label>
                                <input class="inputtext margin0" v-model="addUserArr.xingzuo" style="width:350px;" type="text" name="" id="">
                            </li>
                            <li class="clearfix">
                                <label class="fl labelWidth text-align-r">
                                    手机号码
                                </label>
                                <input class="inputtext margin0" v-model="addUserArr.phone" style="width:350px;" type="text" name="" id="">
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="text-align-c button-box">
            <el-button type="info" @click="addUserBox = true">取消</el-button>
            <el-button type="primary" @click="addUser">保存</el-button>
        </div>
    </div>
</template>

<script>
    import HttpService from '../../api/service'
    import '@/mock/user.js';

    export default {
        data() {
            return {
                tableData: [],
                uploadData:{            //  上传图片需要的参数，记得修改
                    objectId:'111',
                    model:'aaaaa'
                },
                addUserArr:{
                    name:'',
                    radio: '1',         //  单选框默认
                    nickname:'',        //  昵称
                    signature:'',       //  签名
                    type:'',            //  类型
                    hobby:'',           //  爱好
                    email:'',           //  邮箱
                    phone:'',           //  手机号码
                    value1: '',         //  日期选择
                    xingzuo:'',         //  星座
                    imageUrl:'',        //  上传图片的返回地址
                    country:'中国',      //  国家
                    province:'',        //  省份
                    city:'',            //  城市
                    age:'',             //  年龄
                },
                value1:'',   
                addUserBox:true,
                multipleSelection: [],
                select_word: '',
                loadingData: false,
                totalPage:'',           //  总页数
                cpage:1,                //  当前页
                pagesize:10,            //  每页显示数
                totalCount:0,         //  总条数
                searchCondition: '',
                // 省级联动start
                arr: this.$cityAll,
                prov: '陕西',
                city: '西安',
                district: '雁塔区',
                cityArr: [],
                districtArr: []
                // end
            }
        },
        created(){
        },
        mounted() {
            this.getUserList()
        },
        methods: {
            isSwitch(val){
                console.log(val)
            },
            // 设置header颜色
            headerCellClassName({row, rowIndex}){
                return 'header-row';
            },
            // 设置内容行的颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'even-row';
                }
                return '';
            },
            // 获取用户列表
            getUserList(){
                let parmer = {
                    token: '1b235514-7f80-4649-b5b0-a30e52e556b4',
                    page: this.cpage - 1,
                    size: this.pagesize
                }
                HttpService.demoService.getUserList(parmer,resp => {
                    for(let i = 0; i < resp.content.length; i++){
                        if(resp.content[i].status == 0) {
                            resp.content[i].isStatus = true
                        }else{
                            resp.content[i].isStatus = false
                        }
                    }
                    this.totalCount = resp.totalElements
                    this.totalPage = resp.totalPages
                    this.tableData = resp.content
                })
            },
            // 重置密码
            restPwd(item){
                let parmer = this.$qs.stringify({
                    userId:item.id
                })
                HttpService.demoService.resetPassword(parmer,resp=>{
                    console.log(resp.status)
                })
            },
            // 添加用户
            addUser(){
                let parmer = this.$qs.parse(this.addUserArr)
                HttpService.demoService.addUser(parmer,resp=>{
                    console.log(resp)
                })
            },
            // 修改
            update(item){
                // let parmer = this.$qs.stringify({
                //     token:'11111'
                // })
                HttpService.demoService.updateUser('/'+item.id+'?token=111111','',{
                    headers:{
                        'Content-Type':'application/json;charset=UTF-8',
                    }
                },
                resp=>{
                    console.log(resp)
                })
            },
            // 查询
            onQuery(){
                
            },
            // 刷新
            xin(){
                this.getUserList()
            },
            handleSizeChange(val) {
                this.cpage = val
                this.getUserList()
            },
            handleCurrentChange(val) {
                this.cpage = val
                this.getUserList()
            },
            // 省级联动start
            updateCity(){
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.name == this.prov) {
                        this.cityArr = obj.sub
                        break
                    }
                }
                this.city = this.cityArr[1].name
                this.addUserArr.province = this.prov
                this.addUserArr.city = this.cityArr[1].name
            },
            updateDistrict(){
                for (var i in this.cityArr) {
                    var obj = this.cityArr[i]
                    if (obj.name == this.city) {
                        this.districtArr = obj.sub
                        break;
                    }
                }
                if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                    this.district = this.districtArr[1].name
                } else {
                    this.district = ''
                }
            },
            //  end
            //  上传图片触动的方法start
            handleAvatarSuccess(res, file) {
                this.addUserArr.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
            //  end
        },
        beforeMount(){
            this.updateCity()
            this.updateDistrict()
        },
        watch: {
            prov(){
                this.updateCity()
                this.updateDistrict()
            },
            city(){
                this.updateDistrict()
            },
            value1(newVal,oldVal){
                let d = new Date(newVal)
                let day = ''
                if(d.getDate()<10){
                    day = '0' + d.getDate()
                }else{
                    day = d.getDate()
                }
                let time=(d.getMonth() + 1).toString() + day
                this.addUserArr.xingzuo = this.$star(time)             //  星座返回
            }
	    }
    }
</script>

<style>
    .userTable .el-table--border td {
        border-right: none
    }
</style>
